<template>
    <Form class="search">
        <Row>
            <Col span="14" class="fleft">
            <span style="flex:0 0 80px;text-align:right;" class="pr">经销商:</span>
            <FormItem style="flex:1" class="pr">
                <Select
                    v-model="list.form.officeId"
                    clearable 
                    filterable
                    @on-change="onChangeOffice"
                >
                <Option
                    v-for="item in officeList"
                    :value="item.id"
                    :key="item.id"
                >{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem style="flex:1" class="pr">
                <Select
                    v-model="list.form.depId"
                    clearable 
                    filterable
                    @on-change="onChangeDpt"
                >
                <Option
                    v-for="item in dptList"
                    :value="item.id"
                    :key="item.id"
                >{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem style="flex:1">
                <Select v-model="list.form.distributorIds" multiple clearable filterable @on-change='onChangeDistr' :max-tag-count='1' style="width:260px">
                    <Option
                        v-for="item in distributorList"
                        :value="item.distributorId"
                        :key="item.id"
                    >{{ item.distributorName }}</Option>
                    <!-- <Option
                        v-for="item in distributorList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.name }}</Option> -->
                </Select>
            </FormItem>
            </Col>
            <Col span="8">
            <div class="fleft">
                <FormItem label="月份">
                <DatePicker type="month" v-model="list.form.beginYearmonth" format='yyyy-MM' placeholder="选择月份" style="width: 200px" @on-change='onChangeStartMonth'></DatePicker>   
                </FormItem>
                <span class="ml mr">-</span>
                <FormItem>
                <DatePicker type="month" v-model="list.form.endYearmonth" format='yyyy-MM' placeholder="选择月份" style="width: 200px" @on-change='onChangeEndMonth'></DatePicker>
                </FormItem>
            </div>
            </Col>
            <Col span="2">
            <Button class="ml mt5" type="primary" @click="onSearch">搜索</Button>
            </Col>
        </Row>
    </Form>
</template>
<script>

import { clearEmpty, formatDate, formatMonth, getOriginData } from "@/util";
// import NumItem from "./edit/NumItem";
export default {
  data() {
    return {
        officeList: [],
        dptList: [],
        distributorList: []
    };
  },
  props: {
      list: Object
  },
  mounted() {
    this.getOfficeList()
    if (this.list.form.officeId) {
        this.getListByOfficeId(this.list.form.officeId)
    } else {
        this.getDptList()
    }
    if (this.list.form.depId) {
        this.getDistByDptId(this.list.form.depId)
    } else {
        this.getDistList()
    }
    
    let month = (new Date().getMonth() + 1)
    let curmonthstr = month >= 10 ? month : 0 + '' + month
    this.list.form.endYearmonth = this.list.form.beginYearmonth = new Date().getFullYear() + '-' + curmonthstr
  },
  methods: {
    onSearch() {
        this.$emit('onSearch')
    },
    onChangeStartMonth(v) {
        this.list.form.beginYearmonth = v
        this.list.form.endYearmonth = v
    },
    onChangeEndMonth(v){
        this.list.form.endYearmonth = v
        if (!this.list.form.beginYearmonth) {
            this.list.form.beginYearmonth = v
        } else {
            this.timeSelectDeal('endYearmonth')
        }
    },
    timeSelectDeal (type) {
        if (!this.list.form.beginYearmonth || !this.list.form.endYearmonth) return
        let cur = new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1)).getTime() // 获取当前约时间戳
        let b = this.getMonthTime(this.list.form.beginYearmonth).getTime()
        let end = this.getMonthTime(this.list.form.endYearmonth).getTime()
        if (end < b) {
          this.$Message.info('结束时间不能小于起始时间')
          this.list.form[type] = ''
          return
        }
        if ( b < cur && end >= cur && b != cur) {
          this.$Message.info('起始时间是历史月份，结束时间不能大于等于当前月份')
          this.list.form[type] = ''
          return
        }
        if ((b == cur && end != cur)) {
          this.$Message.info('起始时间是当前月份，结束时间必须等于当前月份')
          this.list.form[type] = ''
          return
        }
    },
    getMonthTime(time) {
        if (typeof time === 'string') {
            return new Date(time)
        }
        return new Date(new Date(time).getFullYear() + '-' + (new Date(time).getMonth() + 1))
    },
    onChangeDistr() {
        this.onSearch()
    },
    onChangeOffice() {
        this.list.form.distributorIds = []
        if (this.list.form.officeId) {
            this.getListByOfficeId(this.list.form.officeId)
        } else {
            this.getOfficeList()
            this.getDptList()
            // this.getDistList()
        }
        // this.getDistList()
        this.onSearch()
    },
    onChangeDpt() {
        this.list.form.distributorIds = []
        if (this.list.form.depId) {
            this.getDistByDptId(this.list.form.depId)
        }
        if (this.list.form.officeId && !this.list.form.depId) {
            this.getListByOfficeId(this.list.form.officeId)
        }
        if (!this.list.form.officeId && !this.list.form.depId) {
            this.getOfficeList()
            this.getDptList()
            // this.getDistList()
        }
        // this.getDistList()
        this.onSearch()
    },
    getListByOfficeId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/department/list_by_office/${id}`).then(res => {
            this.dptList = res.departmentList || []
            this.distributorList = res.distributorList || []
        })
    },
    getDistByDptId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/distributor/list_by_depid/${id}`).then(res => {
            this.distributorList = res || []
        })
    },
    getOfficeList() {
      this.$ajaxGet('/tiger/department/office_list').then(res => {
          this.officeList = res
      })
    },
    getDptList() {
        this.$ajaxGet('/tiger/department/list').then(res => {
            this.dptList = res
        })
    },
    getDistList() {
        this.$ajaxGet('/tiger/distributor/list_by_office_all').then(res => {
            this.distributorList = res
        })
    }
  },
};
</script>